<template>
  <div>
    <el-dialog
      :model="form"
      title="账号密码登录"
      center
      :visible.sync="isShow"
      width="500px"
      :rules="rules"
    >
      <el-form>
        <el-form-item label="手机号" prop="phone" label-width="20%">
          <el-input style="width:80%" v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" label-width="20%">
          <el-input style="width:80%" type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button style="background-color: #31c27c;color:#fff" @click="login">登录</el-button>
      </div>
      <div slot="footer" class="login-box-download">
        <a style="color:#fff" class="login-box-download__btn">下载客户端 体验更多内容</a>
      </div>

      <div slot="footer" class="bottom" style="display: block;">
        <span class="link">忘了密码？</span>
        <span class="dotted">|</span>
        <span class="link">注册新帐号</span>
        <span class="dotted">|</span>
        <span class="link">意见反馈</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { userLogin } from "../../api/login";
export default {
  name: "Login",
  data() {
    return {
      form: {
        phone: "",
        password: "",
      },
      rules: {
        pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { message: "长度在11个字符", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    isShow(isShow) {
      this.$store.commit("VISIBLE", isShow);
    },
  },
  computed: {
    ...mapState(["dialogFormVisible"]),
    isShow: {
      get() {
        return this.dialogFormVisible;
      },
      set(isShow) {
        this.$store.commit("VISIBLE", isShow);
      },
    },
  },
  methods: {
    //点击取消
    close() {
      this.$store.commit("VISIBLE", false);
    },
    //点击登录
    async login() {
      //发送请求登录
      const { phone, password } = this.form;
      try {
        const res = await userLogin(phone, password);
        const userInfo = {
          nickname: res.profile.nickname,
          uid: res.profile.userId + "",
          avatarUrl: res.profile.avatarUrl,
        };
        localStorage.setItem("token", res.token);
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
        this.$store.commit("UPDATE_USERINFO", userInfo);
        this.$store.commit("VISIBLE", false);
        console.log(this.$route.name);
        this.$router.history.push({
          name: this.$route.name,
        });
      } catch (error) {
        this.$message({
          message: "请正确输入账号和密码",
          type: "info",
        });
      }
    },
  },
};
</script>

<style>
.login-box-download {
  margin: 20px 0;
  overflow: hidden;
  text-align: center;
  display: inline-block;
  padding: 0 30px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 20px;
  background-color: #31c27c;
  background-image: linear-gradient(90deg, #24ccaa, #31c27c);
}
.bottom {
  height: 16px;
  margin-bottom: 8px;
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.bottom .dotted {
  color: #bfbfbf;
  margin: 0 5px;
}
</style>